<template>
  <div class="address-page flex-col">
    <navbar :back="isBack" title="确认订单" @goBack="goBack"/>

    <scroll-view class="address-container flex-1" scroll-y>
      <div class="clear-10"></div>
      <div class="address-card-item flex-row" v-if="selectedAddress.id" @click="goToAddressListPage">
        <div class="flex-1 flex-col">
          <div class="top flex-row">
            <div class="name">收货人：{{selectedAddress.name}}</div>
            <div class="phone">{{selectedAddress.phone}}</div>
          </div>
          <div class="bottom flex-row">
            <div class="default" v-if="selectedAddress.is_default > 0">
              <span>默认</span>
            </div>
            <div class="address flex-row-v-center flex-1">{{selectedAddress.province}} {{selectedAddress.city}} {{selectedAddress.county}} {{selectedAddress.address}}</div>
          </div>
        </div>
        <div class="right flex-center">
          <img src="/static/assets/img/icon/icon-arrow-right.png" />
        </div>
      </div>
      <div class="address-card-item flex-row" v-else @click="goToAddressListPage">
        <div class="bottom">
          <div class="address">暂无地址，请选择地址</div>
        </div>
      </div>
      <div class="clear-10"></div>
      <div class="goods-card-item flex-row">
        <img class="img" :src="goods.cover_img_url" />
        <div class="info-box flex-1 flex-col-space-between">
          <div class="goods-txt">
            {{ goods.name }}
          </div>
          <div class="price-box flex-row-space-between">
            <div class="num-box flex-row-v-center">
              <div class="label-box">{{goods.selectedSpec.name}}</div>
              <span>x{{num}}</span>
            </div>
            <div class="price-txt">¥{{goods.selectedSpec.processPrice}}</div>
          </div>
        </div>
      </div>
      <div class="clear-10"></div>
      <div class="page__bd">
        <div class="weui-cells weui-cells_after-title">
          <div class="weui-cell">
            <div class="weui-cell__bd">购买数量</div>
            <div class="weui-cell__ft flex-row-v-center">
              <div class="action-sub flex-center" @click="onTapSub">
                <img src="/static/assets/img/icon/icon-sub.png"/>
              </div>
              <div class="num-txt flex-center">{{num}}</div>
              <div class="action-add flex-center" @click="onTapAdd">
                <img src="/static/assets/img/icon/icon-add.png"/>
              </div>
            </div>
          </div>

          <div class="weui-cell">
            <div class="weui-cell__bd">配送费</div>
            <div class="weui-cell__ft">快递 <span class="money-txt">¥{{goods.processExpressFee}}</span></div>
          </div>

          <div class="weui-cell">
            <div class="weui-cell__bd">优惠券</div>
            <div class="weui-cell__ft weui-cell__ft_in-access">
              暂无
            </div>
          </div>
        </div>

        <div class="clear-10"></div>

        <div class="weui-cells weui-cells_after-title">
          <div class="weui-cell">
            <div class="weui-cell__bd">备注</div>
            <div class="weui-cell__ft weui-cell__ft_in-access">
              <input placeholder="备注偏好、个性化需求" v-model="note"/>
            </div>
          </div>
        </div>
      </div>
    </scroll-view>

    <div class="action-box flex-row-space-between">
      <div class="price-box flex-row-v-center">
        合计：<div class="price-txt">¥{{totalPrice}}</div>
      </div>
      <div class="action-btn flex-center" @click="pay">
        结算
      </div>
    </div>
  </div>
</template>

<script>
  import global from 'global'
  import navbar from '@/components/navbar'
  import Core from 'core'
  import Common from 'common'

  export default {
    components: {
      navbar
    },
    data () {
      return {
        statusH: global.state.statusH,
        titleH: global.state.titleH,
        navBarHeight: global.state.statusH + global.state.titleH,
        isBack: true,

        num: 1,
        goods: {},
        selectedAddress: {},
        note: ''
      }
    },

    onLoad () {
      this._getAddressList()
      this._getGoodsDetail()
      let that = this
      Core.Event.on('select_address', function (address) {
        that.selectedAddress = address
      })
  },

    computed: {
      totalPrice () {
        return this.goods.selectedSpec.processPrice * this.num + Number(this.goods.processExpressFee)
      }
    },

    methods: {
      goBack () {
        Core.Util.goBack()
      },

      onTapSub () {
        if (this.num > 1) {
          this.num = this.num - 1
        }
      },

      onTapAdd () {
        this.num = this.num + 1
      },

      goToAddressListPage () {
        Common.go('/pages/收货地址/main')
      },

      pay () {
        if (!this.selectedAddress.id) {
          wx.showModal({
            title: "",
            content: "请先选择地址",
            showCancel: false,
            success: function(res) {
              if (res.confirm) {
                Common.go('/pages/收货地址/main')
              } else if (res.cancel) {
                console.log("用户点击取消");
              }
            }
          });
        }
        // 支付完成以后，调创建订单
        Core.Api.Order.createOrder(this.type, this.goods.selectedSpec.id, this.num, this.goods.id, this.selectedAddress.id, this.note).then(res => {
          let sn = res.order_sn;
          Core.Api.Pay.payOrder(sn)
            .then(res => {
              if (res && res.wx_pay) {
                let wxPay = res.wx_pay;
                return Core.WeChat.requestPayment(
                  wxPay.timeStamp,
                  wxPay.nonceStr,
                  wxPay.package,
                  wxPay.signType,
                  wxPay.paySign
                );
              }
            })
            .then(res => {
              if (res.errMsg && res.errMsg === 'requestPayment:ok') {
                wx.showModal({
                  title: "",
                  content: "订单支付成功",
                  showCancel: false,
                  success: function(res) {
                    if (res.confirm) {
                      Common.goRedirect('/pages/成功付款/main?order_sn=' + sn)
                    } else if (res.cancel) {
                      console.log("用户点击取消");
                    }
                  }
                });
              }
            })
        });
      },

      _getAddressList () {
        Core.Api.UserAddress.addressList().then(res => {
          let userAddressList = res.user_address_list
          if (userAddressList.length <= 0) {
            this.selectedAddress = {}
          }
          userAddressList.forEach(v => {
            if (v.is_default > 0) {
              this.selectedAddress = v
            }
          })
        })
      },

      _getGoodsDetail () {
        this.type = this.$root.$mp.query['type']
        this.goods = JSON.parse(this.$root.$mp.query['goods'])
        this.goods.goods_spec_list.forEach(v => {
          if (v.selected) {
            this.goods.selectedSpec = v
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .address-page {
    width: 100%;
    height: 100%;
    overflow: hidden;

    .address-container {
      height: 100%;
      overflow-y: auto;
    }

    .address-card-item {
      background: #FFFFFF;
      padding: 16px 12px;
      .top {
        color: rgb(171, 171, 171);
        font-size: 16px;
        .name {
          color: rgb(65, 65, 65);
          margin-right: 10px;
        }
        .phone {
          color: rgb(171, 171, 171);
        }
      }

      .bottom {
        .default {
          font-size: 14px;
          span {
            background: rgb(251, 62 ,8);
            color: #FFFFFF;
            padding: 2px 4px;
          }
          margin-right: 10px;
        }
        .address {
          color: rgb(171, 171, 171);
          line-height: 18px;
          font-size: 14px;
        }
      }

      .right {
        color: rgb(171, 171, 171);
        img {
          width: 22px;
          height: 22px;
        }
      }
    }

    .goods-card-item {
      background: #FFFFFF;
      padding: 16px 12px;
      .img {
        width: 80px;
        height: 80px;
        margin-right: 10px;
      }

      .info-box {
        color: rgb(118, 118, 118);
        align-items: flex-start;
        .goods-txt {
          font-size: 16px;
          line-height: 18px;
        }

        .price-box {
          width: 100%;
          .label-box {
            border: 1px solid rgb(248, 128, 80);
            padding: 2px 4px;
            border-radius: 6px;
            background-color: rgb(246, 246, 246);
            color: rgb(248, 128, 80);
            margin-right: 10px;
            font-size: 14px;
            line-height: 14px;
          }
          .price-txt {
            color: rgb(248, 128, 80);
          }
        }
      }
    }

    .action-sub, .action-add {
      width: 24px;
      height: 24px;
      img {
        width: 24px;
        height: 24px;
      }
    }

    .num-txt {
      width: 40px;
      color: rgb(86, 86, 86);
    }

    .weui-cell__bd {
      color: rgb(86, 86, 86);
      font-size: 14px;
    }

    .weui-cell__ft {
      font-size: 14px;
      .money-txt {
        color: rgb(248, 128, 80);
        margin-left: 4px;
      }
    }

    .action-box {
      height: 50px;
      background: #FFFFFF;

      .price-box {
        padding: 0 12px;
        font-size: 16px;
        .price-txt {
          color: rgb(248, 128, 80);
        }
      }

      .action-btn {
        height: 100%;
        background-color: rgb(252, 62, 7);
        color: #FFFFFF;
        width: 134px;
      }
    }
  }
</style>
